<!DOCTYPE html>
<html>
<head>
<script src="./resources/webgl-test-utils-full.js"></script>
<script src="./resources/tex-image-and-sub-image-utils.js"></script>
<script src="./resources/tex-image-and-sub-image-image-bitmap-utils.js"></script>
<script src="../../resources/js-test.js"></script>
<script>

window.jsTestIsAsync = true;
var worker = new Worker('./resources/imageBitmap-transferable.js');

var wtu = WebGLTestUtils;
var tiu = TexImageUtils;
var gl = null;
var internalFormat = "RGBA";
var pixelFormat = "RGBA";
var pixelType = "UNSIGNED_BYTE";
var redColor = [255, 0, 0];
var greenColor = [0, 255, 0];
var blackColor = [0, 0, 0];
var halfRed = [128, 0, 0];
var halfGreen = [0, 128, 0];

var image = new Image();

function promiseRejected()
{
    document.getElementById("results").innerHTML = "Promise <span style='color:red'>REJECTED</span>";
}

function pass()
{
    document.getElementById("results").innerHTML = "Test <span style='color:green'>PASSED</span>";
}

function postToWorker(message, transferable) {
    return new Promise((resolve, reject) => {
        function onMessage(e) {
            resolve(e.data);
            worker.removeEventListener("message", onMessage);
        }
        worker.postMessage(message, transferable);
        worker.addEventListener("message", onMessage);
    });
}

function generateTest()
{
    var bitmaps = [];

    var canvas = document.getElementById("example");
    gl = canvas.getContext("webgl");

    gl.clearColor(0,0,0,1);
    gl.clearDepth(1);

    // There is an existing layout test fast/canvas/canvas-ImageBitmap-transferable.html
    // which tests the transferable logic for ImageBitmap with default options.
    // To test ImageBitmap with non-default options such as premultiplyAlpha=none,
    // we need to use WebGL for testing because normal 2D canvas cannot tell the difference
    // between a premultiplied/unpremultiplied ImageBitmap.
    createImageBitmap(image, {imageOrientation: "flipY", premultiplyAlpha: "none"}).then(function(imageBitmap) {
        var replyPromise = postToWorker(imageBitmap, [imageBitmap]);
        replyPromise.then(reply => {
            var retVal = {testPassed: true, alpha: 0.5};
            var program = tiu.setupTexturedQuad(gl, internalFormat);
            runOneIteration(false, gl.TEXTURE_2D, program, reply, true, false, retVal);
            runOneIteration(true, gl.TEXTURE_2D, program, reply, true, false, retVal);
            program = tiu.setupTexturedQuadWithCubeMap(gl, internalFormat);
            runOneIteration(false, gl.TEXTURE_CUBE_MAP, program, reply, true, false, retVal);
            runOneIteration(true, gl.TEXTURE_CUBE_MAP, program, reply, true, false, retVal);
            if (retVal.testPassed)
                pass();
            finishJSTest();
        });
    }, function() {
        promiseRejected();
        finishJSTest();
    });
}

function init()
{
    if (window.testRunner) {
        testRunner.dumpAsText();
    }
    image.onload = function() {
        generateTest();
    }
    image.src = "resources/red-green-semi-transparent.png";
}
</script>
</head>
<body onload="init()">
<canvas id="texcanvas" width="2" height="2"></canvas>
<canvas id="example" width="32" height="32"></canvas>
<div id="results">Test <span style="color:red">FAILED</span></div>
</body>
</html>
